<template>
  <div class="docWrap" ref="docWrap" v-if="showClose">
    <div class="close" @click="close()">关闭</div>
  </div>
</template>

<script>
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import { generateReport } from "@/api/api.js";
import bus from "@/bus";
let docx = require("docx-preview");
export default {
  name: "Docx",
  data() {
    return {
      showClose: false,
      enterprisesStatus: [
        {
          key: "单位名称",
          value: "四川泸州川南发电有限责任公司",
        },
        {
          key: "单位地址",
          value: "四川省泸州市江阳区江北镇",
        },
        {
          key: "单位性质",
          value: "国有企业",
        },
        {
          key: "组织机构代码 ",
          value: "4",
        },
        {
          key: "所属行业",
          value: "发电",
        },
        {
          key: "报告年度 ",
          value: "2017年",
        },
        {
          key: "法定代表人",
          value: "李胜章",
        },
        {
          key: "负责人姓名 ",
          value: "张煦枭",
        },
        {
          key: "负责人电话",
          value: "",
        },
        {
          key: "负责人邮箱",
          value: "",
        },
      ],
    };
  },
  props: {
    fileName: {
      type: String, // 输出文件名
      default: "",
    },
    fileTemplete: {
      type: String, // public下存放的word模板名称
      default: "",
    },
    // exportData: {
    //   type: Object, // 导出的word数据
    //   default: () => {},
    // },
  },
  mounted() {
    bus.$on("emitViewReportFun", (reportObj) => {
      this.showClose = true;
      this.preview(reportObj);
    });
  },
  methods: {
    close() {
      var id = document.getElementById("reportClass");
      if (id) {
        id.remove();
        this.showClose = false;
      }
    },
    // 点击导出word
    preview(reportObj) {
      // var exportData = res.result;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(
        //   https://segmentfault.com/a/1190000041301193
        //   https://docxtemplater.com/docs/faq/#docxtemplater-in-a-vuejs-project
        // "https://docxtemplater.com/tag-example.docx",
        `http://www.opendbar.cn/images/carbon/test.docx`,
        // `${reportObj.filePath}`,

        (error, content) => {
          // 抛出异常
          if (error) throw error;
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content);
          //   console.log(zip);
          // 创建并加载docxtemplater实例对象
          let doc = new Docxtemplater();

          doc.loadZip(zip).setOptions({
            nullGetter: function () {
              return "";
            },
          });
          doc.loadZip(zip);
          // 设置模板变量的值
          // doc.setData({
          //   // ...exportData,
          //   // list: this.enterprisesStatus,
          // });
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            };
            //   console.log(JSON.stringify({ error: e }));
            throw error;
          }
          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          console.log(out)
          var divDom = document.createElement("div");
          divDom.setAttribute("id", "reportClass");
          this.$refs.docWrap.append(divDom);
          // this.$refs.file
          docx.renderAsync(out, divDom); // 渲染到页面
        }
      );
    },
  },
};
</script>
<style scoped lang='scss'>
.word-box {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(2, 124, 141, 1);
  color: #fff;
  width: fit-content;
  overflow-y: auto;
}

.word-box:hover {
  transition: 0.2s;
  opacity: 0.85;
}

.close {
  position: absolute;
  right: 50px;
  top: 30px;
  cursor: pointer;
  color: #fff;
}

.docWrap {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  /* width: 100%; */
  z-index: 9999;
  overflow-y: auto;
}
</style>